<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <link rel="shortcut icon" href="images/adipo.ico" /> 
        <title>Systems Biology Metabolite Pathway Vis</title>
        <!-- JSON support for IE (needed to use JS API) -->
        <script type="text/javascript" src="js/min/json2.min.js"></script>        
        <!-- Flash embedding utility (needed to embed Cytoscape Web) -->
        <script type="text/javascript" src="js/min/AC_OETags.min.js"></script>        
        <!-- Cytoscape Web JS API (needed to reference org.cytoscapeweb.Visualization) -->
        <script type="text/javascript" src="js/min/cytoscapeweb.min.js"></script>

        <script type="text/javascript" src="http://cdn.cancerregulome.org/js/protovis/3.3.1/protovis-r3.3.1.js"></script>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="js/jquery.layout-latest.js"></script>
        <script type="text/javascript" src="js/tipsy_tooltip/jquery.tipsy.js"></script>
        <link rel="stylesheet" type="text/css" href="js/tipsy_tooltip/tipsy.css">
        <script type="text/javascript" src="js/tipsy_tooltip/tipsy.js"></script>    
        <script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script>
	<!-- <script type="text/javascript" src="js/jquery.xml2json.js"></script> -->

	<script type="text/javascript" src="js/visual_bypass.js"></script>	
        <script type="text/javascript" src="js/graph_interaction.js"></script>
        <script type="text/javascript" src="js/globals.js"></script>
        <script type="text/javascript" src="data/fatgenes.js"></script>
	<script type="text/javascript" src="data/mets_details.js"></script>
        <script type="text/javascript" src="data/rxn_details2.js"></script>
        <link rel="stylesheet" href="js/messi/messi.min.css" />
	<link rel="stylesheet" href="css/style.css" />
        <script src="js/messi/messi.min.js"></script>
	<script type="text/javascript">
            window.onload=function() {
		$('body').layout({ applyDemoStyles: true, west__initClosed: true});
       	        $('.adipo_pathways').change(function(){
			$("select option:selected").each(function () {
				loadPathwayCyWeb(this.value, "metabpw_vis_container");
				return;
			});
		});
                var div_id = "metabpw_vis_container";
                // initialization options
                var options = {
                    // where you have the Cytoscape Web SWF
                    swfPath: "/swf/CytoscapeWeb",
                    // where you have the Flash installer SWF
                    flashInstallerPath: "/swf/playerProductInstall"
                };
                var vis = new org.cytoscapeweb.Visualization(div_id, options);
                vis.addListener("click", "nodes", function(event) {
                        handle_node_click(event);
                    });
                   function handle_node_click(event) {
                   	process_visnode(event); 
		   } 
		vis.addListener("mouseover", "nodes", function(evt){
                	//evt.target.data.NodeTypes = met
			showtip(evt, div_id);    
		});
		//visual styling nodes.image = "url/icon"
	// Change the labels of selected nodes and edges:
	vis.ready(function (){
		vis.visualStyleBypass(getVisualByPass(vis.nodes()));
	});
	$.get("gml/cholesterol.xgmml", function(data) {
                	if (typeof data !== "string") {
                        	if (window.ActiveXObject) { // IE
                                	data = data.xml;
                        	} else {
                                	data = (new XMLSerializer()).serializeToString(data);
                        	}				
                	}
			//metabpw_vis["network"] = $.xml2json(data);
                	vis.draw({ network: data, layout: "Preset" });
                });
	    };
        </script>
        <style>
            /* The Cytoscape Web container must have its dimensions set. */
            html, body { height: 100%; width: 100%; padding: 0; margin: 0; }
            #metabpw_vis_container { width: 100%; height: 100%; }
        </style>
    </head>
    
    <body>
 <div id="header" class="ui-layout-north">
        <span>
	<center>
&nbsp;&nbsp;<a href="http://wwwen.uni.lu" target="blank"><img src="images/unilulogo.jpg" /></a>&nbsp;&nbsp;
&nbsp;&nbsp;<a href="http://wwwen.uni.lu" target="blank"><img src="images/lcsblogo.jpg" /></a>&nbsp;&nbsp;

	<a href="http://wwwen.uni.lu/research/fstc/life_sciences_research_unit/systems_biology" target="blank">
	<font size='+3'>Systems Biology Adipogenesis</a></font>
<font size='+1'>&nbsp;Pathway:&nbsp;</font>
	<select class="adipo_pathways">
  <option size='+2' value="cholesterol">Cholesterol Metabolism</option>
  <option size='+2' value="fatty_acid_activation">Fatty Acid Activation</option>
  <option size='+2' value="fatty_acid_oxidation">Fatty Acid Oxidation</option>
  <option size='+2' value="t_g_synthesis">Triacylglycerol Synthesis</option>
  <option size='+2' value="v_l_i">Val-Leu-Ile Metabolism</option>
        </select>
&nbsp;
<a href="http://code.google.com/p/adipoflux" target="blank"><font size='-1'>Info</font></a>
&nbsp;&nbsp;
<a href="http://code.google.com/p/adipoflux" target="blank"><font size='-1'>Contact</font></a>
</span></center>
	</div>
        <div class="ui-layout-center" id="metabpw_vis_container">
            Cytoscape Web will replace the contents of this div with your graph.
        </div>
        <div class="ui-layout-west">AdipoFlux Legend
	<div id="legend_image"></div>
	</div>
    </body>
    
</html>
